<script setup lang="ts">
import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useSvgIcon } from '@/hooks/common/icon';
import { $t } from '@/locales';
import SvgIcon from '@/components/custom/svg-icon.vue';

const authStore = useAuthStore();
const { routerPushByKey, toLogin } = useRouterPush();
const { SvgIconVNode } = useSvgIcon();
// 11
function loginOrRegister() {
  toLogin();
}

function logout() {
  authStore.resetStore();
}

function handleDropdown(key: string) {
  if (key === 'logout') {
    logout();
  } else {
    // If your other options are jumps from other routes, they will be directly supported here
    routerPushByKey(key);
  }
}
</script>

<template>
  <!-- 登录按钮 -->
  <ElButton v-if="!authStore.isLogin" type="primary" class="px-14px" @click="loginOrRegister">
    {{ $t('page.login.common.login') }}
  </ElButton>

  <ElDropdown class="px-14px" trigger="click" @command="handleDropdown">
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem command="logout">
          <SvgIcon icon="ph:power" class="mr-12px" />
          {{ $t('common.logout') }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
    <div class="flex items-center">
      <SvgIcon icon="ph:user-circle" class="mr-5px text-icon-large" />
      <span class="text-16px font-medium">{{ authStore.userInfo.userName }}</span>
    </div>
  </ElDropdown>
</template>

<style scoped></style>
